import { useState } from "react";
import { v4 as uuid } from "uuid";
import TodoForm from "./components/Tasks/TodoForm";
import TodoList from "./components/Tasks/TodoList";
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';

function App() {
    const [todos, setTodos] = useState([]);

    const addTodoHandler = (text) => {
        const newTodos = {
            text: text,
            isComplete: false,
            id: uuid()
        };
        setTodos([...todos, newTodos]);
    };

    const deleteTodoHandler = (id) => {
        setTodos(todos.filter((todo) => todo.id !== id));
    };

    const toggleTodoHandler = (id) => {
        setTodos(todos.map((todo) =>
            todo.id === id ? { ...todo, isComplete: !todo.isComplete } : todo
        ));
    };

    return (
        <div className="App">
            <div className="container">
                <div className="row">
                    <h1 className="text-center">Todo App</h1>
                    <TodoForm addTodo={addTodoHandler} />
                    <TodoList todos={todos} deleteTodo={deleteTodoHandler} toggleTodo={toggleTodoHandler} />
                </div>
            </div>
        </div>
    );
}

export default App;
